<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-01-07 15:10:42
 * @LastEditTime: 2024-02-25 22:28:35
 * @FilePath: \env-manager-pc\src\views\document\device\detail\model\shengji.vue
-->
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { UpdateType } from './page'
import { useUpdateDataForm, useUpdateRecordForm } from './page.helper'
import documentApi from '@/api/modules/document'

const { deviceId } = defineProps({
  deviceId: {
    type: String,
    default: '',
  },
})
const callLading = ref(false)
const setLoading = ref(false)
const stopLoading = ref(false)

const types = [
  {
    label: 'FTP',
    value: UpdateType.FTP,
  }, {
    label: 'Http',
    value: UpdateType.Http,
  },
]

const { updateFormData } = useUpdateRecordForm()
const { updateDataFormData } = useUpdateDataForm(deviceId)

function callUpdateRecord() {
  callLading.value = true
  documentApi.DeviceCallLastUpgrade({ deviceObjID: deviceId }).then((res) => {
    updateFormData.value.UpBefourVer = res.UpBefourVer
    updateFormData.value.UpEndVer = res.UpEndVer
    updateFormData.value.UpLastBeginTime = res.UpLastBeginTime
    updateFormData.value.UpLastEndTime = res.UpLastEndTime
    updateFormData.value.UpCurStatus = res.UpCurStatus
    callLading.value = false
  }, () => {
    callLading.value = false
  })
}

function getLastUpdateData() {
  documentApi.GetLastUpgrade({ deviceObjID: deviceId }).then((res) => {
    updateFormData.value.UpBefourVer = res.UpBefourVer
    updateFormData.value.UpEndVer = res.UpEndVer
    updateFormData.value.UpLastBeginTime = res.UpLastBeginTime
    updateFormData.value.UpLastEndTime = res.UpLastEndTime
    updateFormData.value.UpCurStatus = res.UpCurStatus
  })
}

getLastUpdateData()

function setUpdate() {
  setLoading.value = true
  documentApi.DeviceStartUpgrade(updateDataFormData).then(() => {
    ElMessage.success('下发成功')
    setLoading.value = false
  }, () => {
    setLoading.value = false
  })
}
function stopUpdate() {
  stopLoading.value = true
  documentApi.DeviceStopUpgrade({
    deviceObjID: deviceId,
  }).then(() => {
    stopLoading.value = false
    ElMessage.success('停止已下发')
  }, () => {
    stopLoading.value = false
  })
}
</script>

<template>
  <div>
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>最近升级记录</span>
          <el-button type="primary" link :loading="callLading" @click="callUpdateRecord">
            召测
          </el-button>
        </div>
      </template>
      <el-form v-loading="callLading" label-width="150px" label-suffix="：">
        <el-row>
          <el-col :span="12">
            <el-form-item label="升级前版本">
              <el-input v-model="updateFormData.UpBefourVer" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="升级后版本">
              <el-input v-model="updateFormData.UpEndVer" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="升级开始时间">
              <el-input v-model="updateFormData.UpLastBeginTime" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="升级结束时间">
              <el-input v-model="updateFormData.UpLastEndTime" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="box-card mt-20px" shadow="never">
      <template #header>
        <div class="card-header">
          <span>升级</span>
          <div>
            <el-button type="primary" link :loading="setLoading" @click="setUpdate">
              下发
            </el-button>
            <el-button type="warning" link :loading="stopLoading" @click="stopUpdate">
              停止升级
            </el-button>
          </div>
        </div>
      </template>
      <el-form v-loading="setLoading" label-width="150px" label-suffix="：">
        <el-row>
          <el-col :span="12">
            <el-form-item label="文件方式">
              <el-select v-model="updateDataFormData.upgradeType">
                <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="升级文件URL">
              <el-input v-model="updateDataFormData.url" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户名">
              <el-input v-model="updateDataFormData.upUser" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码">
              <el-input v-model="updateDataFormData.upPasswd" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.card-header {
  --at-apply: flex flex-justify-between;
}
</style>
